<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆形渐变</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <script>
    /**
     * 圆形渐变
     * var grd = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
     * x0: 渐变开始点的 x 坐标
     * y0: 渐变开始点的 y 坐标
     * r0: 渐变开始点的半径
     * x1: 渐变结束点的 x 坐标
     * y1: 渐变结束点的 y 坐标
     * r1: 渐变结束点的半径
    */
    const myCanvas = document.getElementById("myCanvas");
    const ctx = myCanvas.getContext("2d");

    ctx.arc(100, 100, 100, 0, 2 * Math.PI);
    let rlg = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
    rlg.addColorStop(0, "red");
    rlg.addColorStop(0.2, "white");
    rlg.addColorStop(0.4, "blue");
    rlg.addColorStop(0.6, "pink");
    rlg.addColorStop(0.8, "yellow");
    rlg.addColorStop(1, "black");
    ctx.fillStyle = rlg;
    ctx.fill();
  </script>
</body>
</html>